class Depend {
    constructor() {
        this.reactiveFns = []
    }
    addDepend(reactiveFn) {
        this.reactiveFns.push(reactiveFn)
    }
    notify() {
        this.reactiveFns.forEach(fn => {
            fn()
        })
    }
}


const depend = new Depend()

function watchFn(fn) {
    depend.addDepend(fn)
}


//对象的响应式

const obj = {
    name: 'wyd',
    age: 19,
}


// 监听对象的属性变量: Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
    get: function(target, key, receiver) {
      return Reflect.get(target, key, receiver)
    },
    set: function(target, key, newValue, receiver) {
      Reflect.set(target, key, newValue, receiver)
      depend.notify()
    }
  })
  


watchFn(function () {
    const newName = objProxy.name
    console.log("你好啊, 李银河")
    console.log("Hello World")
    console.log(objProxy.name) // 100行
})

watchFn(function () {
    console.log(objProxy.name, "demo function -------")
})

watchFn(function () {
    console.log(objProxy.age, "age 发生变化是需要执行的----1")
})

watchFn(function () {
    console.log(objProxy.age, "age 发生变化是需要执行的----2")
})

objProxy.name = "kobe"
objProxy.name = "james"
objProxy.name = "curry"

objProxy.age = 100
//   console.log(1);